class Banner {
	constructor(newBox, newLis) {
		//这两个元素的某些属性会被修改
		this.index = 0;
		this.oBox = newBox;
		this.oLis = newLis;
		this.time = null;
		this.oBox.style.backgroundImage = "url(bannerimg/" + this.index + ".jpg)";
		this.oLis[this.index].style.backgroundColor = "#ed145b";
		this.eventBind();

	}
	Automatic() {
		let that = this;
		that.StopAutomatic();
		that.time = setInterval(function() {
			if (that.index == that.oLis.length - 1) {
				that.index = 0;

			} else {
				that.index++;
				that.oBox.style.backgroundImage = "url(bannerimg/" + that.index + ".jpg)";
			}
			that.setLisColor();
		}, 3000);
	}
	StopAutomatic() {
		clearInterval(this.time);
	}
	setBgcImage() {
		this.oBox.style.backgroundImage = "url(bannerimg/" + this.index + ".jpg)";
	}

	//设置Li背景颜色
	setLisColor() {
		for (let i = 0; i < this.oLis.length; i++) {
			if (this.index == i) {
				this.oLis[i].style.backgroundColor = "#ed145b";
			} else {
				this.oLis[i].style.backgroundColor = "#9d9fa2";
			}
		}
	}
	eventBind() {
		let that = this;
		for (let i = 0; i < this.oLis.length; i++) {
			this.oLis[i].onclick = function() {
				that.index = i;
				that.setBgcImage();
				that.setLisColor();
			}
		}
		this.oBox.onmouseout = function() {
			that.Automatic();
			this.onmouseover = function() {
				// clearInterval(that.time);
				that.StopAutomatic();
			}
		}
	}
}
let oBox = document.getElementById("banner");
	let oLis = document.getElementsByClassName("li");
	let b = new Banner(oBox, oLis);

